<script setup lang="ts">
import { getCurrentInstance, ref,reactive } from 'vue'
interface formStatus{
  usremail: string,
  password: string
}
const { proxy } = getCurrentInstance() as any
let usrlogin = reactive<formStatus>({
  usremail: '',
  password: ''
})
const handleLogin = async () => {
  try {
    let res = await proxy.$axios.post('m1/1345359-0-default/usr/login', {
      usremail: usrlogin.usremail,
      password: usrlogin.password,
    })
    console.log(res);
  } catch (e) {
    console.log(e);
  }
  return false
}
let pwdType = ref<string>('password')
let showpwd = ref<boolean>(false)
const handlepwd = () => {
  showpwd.value = !showpwd.value
  if (showpwd.value === true) {
    pwdType.value = 'text'
  } else {
    pwdType.value = 'password'
  }
  
}

</script>

<template>
  <div class="box">
    <div class="left">
        <img class="cs" src="../../assets/cs.png">
    </div>
    <div class="right">
      <header class="title">欢迎登录创思设备管理系统</header>
      <form @submit.prevent="handleLogin()">
        <div class="inputbox">
          <label for="usremail">邮箱:</label>
          <br>
          <input class="usremail" name="usremail" v-model="usrlogin.usremail" id="usremail" type="email">
        </div>
        <div class="inputbox">
          <label for="password">密码:</label>
          <br>
          <input class="password" v-model="usrlogin.password" ref="pwd" name="password" id="password" :type="pwdType">
          <i class="iconfont" :class="showpwd?'icon-yanjing_xianshi':'icon-buxianshi'" @click="handlepwd()" ></i>
        </div>
        <div class="assistBox">
          <div class="rememberbox">
            <input class="remember" name="remember" id="remember" type="checkbox">
            <label for="remember">记住我</label>
          </div>
          <div class="forgetpwdbox">
            忘记密码
          </div>
        </div>
        <input class="loginbtn" value="登录"  type="submit">
      </form>
      <div class="resgisterbox"><p>你还没有账号?<span class="resgister"><router-link to="/register">注册账号</router-link> </span></p></div> 
    </div>
  </div>
</template>

<style scoped>
.box{
    width: 100vw;
    height: 100vh;
    display: flex;
}
.left{
    height: 100%;
    background-color:rgba(154, 154, 235, 0.5);
    flex: 1;
}
.right{
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
    align-items: center;
    justify-content: center;
}
.cs{
  position: relative;
  left: 50%;
  top: 50%;
  display: block;
  width: 50%;
  height: 50%;
  transform: translate(-50%,-50%);
}
i{
 position: relative;
 display: block;
 left: 420px;
 top: -25px;
 width: 30px;
 height: 30px;
}
.title{
  font-size: 32px;
  line-height: 37.5px;
  margin-bottom: 50px;
}
.inputbox{
  display: flex;
  flex-direction: column;
  width: 446px;
  height: 103px;
}
.assistBox{
  display: flex;
  flex-direction: row;
  line-height: 35px;
}
.rememberbox{
  display: flex;
}
.rememberbox > label{
  font-weight: 500;
  font-size: 16px;
  margin-left: 10px;
}
.remember{
  width: 20px;
}
.forgetpwdbox{
  margin-left: 300px;
}
.loginbtn{
  width: 446px;
  border: none;
  color: #ffffff;
  background-color: #1E1E1E;
  margin-top: 10px;
  cursor: pointer;
}
.resgisterbox{
  margin-top: 20px;
}
.resgister{
  margin-left: 5px;
  color: #4D4DDB;
}

label{
  font-size: 24px;
}
input{
  height: 35px;
  padding-left: 10px;
  outline: none;
  border: 2px solid #4D4DDB;
  border-radius: 5px;
}
a{
  text-decoration: none;
}
</style>
